import React,{useState,useEffect} from "react";
import AntSwiper from "../../components/antSwiper/AntSwiper";
import style from "./style.module.scss";
import api from '../../api/index'
import {useNavigate,NavLink} from 'react-router-dom'
import ShopList from "./shopList/ShopList";
import {useSelector} from 'react-redux'
export default function Shop() {
  const [banner,setBanner] = useState([])
  //定义容器
  const [hotList,setHotList] = useState([])
  const [faList,setFaList] = useState([])
  const naviagte=useNavigate()
  //城市
  const city = useSelector(store=>store.city.cityname)
  //进入网页获取数据-----------------
  useEffect(()=>{
    getHomeBanner()
    getNewsComment()
    getFaComment()
  },[])
   //跳转搜索界面--------------
   function goSearch(){
    naviagte('/search')
  }
  //轮播接口--------------------------------------------------
  async function getHomeBanner() {
    let res = await api.getBanner();
    console.log("轮播接口------", res.data);
    setBanner(res.data.banner);
  }
  //热销单品-------------------------------------------
  async function getNewsComment(){
    let res = await api.getNewsComment({city})
    console.log('热销单品',res.data);
    setHotList(res.data.list)
  }

    //家庭常用-------------------------------------------
    async function getFaComment(){
      let res = await api.getFaComment({city})
      console.log('家庭常用----',res.data);
      setFaList(res.data.list)
    }
  return (
    <div>
      {/* 顶部--搜索框 */}
      <div className={style.header}>
        <div className={style.location}></div>
        <div className={style.center}>
          <div className={style.input} onClick={goSearch}></div>
        </div>
        <div className={style.shop}>购物</div>
      </div>

      {/* 轮播图 */}
      <AntSwiper arr={banner}></AntSwiper>

      
      {/*  */}
      <div className={style.content}>
        <div className={style.item}>
          <NavLink to='/friend'>新品上市</NavLink>
        </div>
        <div className={style.item}>
          <NavLink to='/shequ'>二手商场</NavLink>
        </div>
      </div>
      {/* 热销单品 */}
      <ShopList list={hotList} title='热销单品'/>
      {/* 家庭常用 */}
      <ShopList list={faList} title='家庭常用'/>
    </div>
  );
}
